<template>
  <div>
    <el-form ref="queryCondition" :model="queryCondition" label-width="auto">
      <el-row :gutter="12">
        <el-col :span="4" :offset="1">
          <el-form-item prop="shoppingState" label="state">
            <el-select v-model.trim="queryCondition.shoppingState">
              <template v-for="(e, i) in $store.state.shoppingStateEnums">
                <el-option :label="e.label" :value="e.value" :key="i">
                </el-option>
              </template>
              <el-option :value="null" label="..."></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="2">
          <el-form-item label-width="10px">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="queryByCondition(1)"
              >查询
            </el-button>
          </el-form-item>
        </el-col>
        <el-col :span="1">
          <el-form-item label-width="0">
            <el-button
              type="warning"
              icon="el-icon-refresh"
              @click="() => $refs.queryCondition.resetFields()"
            >
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-button type="success">批量重交</el-button>
      <el-button type="primary">批量审核</el-button>
    </el-row>
    <el-table
      :data="results"
      ref="resultsTable"
      height="506px"
      stripe
      highlight-current-row
      @selection-change="(rows) => (selected = rows)"
    >
      <el-table-column type="selection" align="center"></el-table-column>

      <el-table-column type="expand">
        <template #default="{ row }">
          <template v-for="(e, i) in row.shoppingBillItems">
            <el-descriptions :key="i" border size="small">
              <el-descriptions-item
                label="物品名称"
                label-class-name="el-descr-label"
                content-class-name="el-descr-content"
                >{{ e.goodsName }}</el-descriptions-item
              >
              <el-descriptions-item
                label="物品单价"
                label-class-name="el-descr-label"
                content-class-name="el-descr-content"
                >{{ e.goodsPrice }}</el-descriptions-item
              >
              <el-descriptions-item
                label="物品数量"
                label-class-name="el-descr-label"
                content-class-name="el-descr-content"
                >{{ e.quantity }}</el-descriptions-item
              >
            </el-descriptions>
          </template>
        </template>
      </el-table-column>

      <el-table-column
        prop="shoppingBillCode"
        label="ID/Code"
      ></el-table-column>

      <el-table-column label="bill-state" align="center">
        <template #default="{ row }">
          <el-tag :type="stateColor(row)">{{ stateContent(row) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="submitter" prop="submitter"> </el-table-column>
      <el-table-column label="订单金额" prop="amount"> </el-table-column>
      <el-table-column label="供方公司" prop="supplyCompany"> </el-table-column>
      <el-table-column label="提交时间" prop="submitTime"> </el-table-column>
      <el-table-column label="审核评分" prop="auditScore"> </el-table-column>
      <el-table-column label="重交次数" prop="resubmitTimes"> </el-table-column>
      <el-table-column width="180px" fixed="left" label="重交——审核">
        <template #default="{ row }">
          <template v-if="row.shoppingState === 'toAudit'">
            <el-button
              size="mini"
              type="success"
              icon="el-icon-document-copy"
              @click="resubmitById(row.shoppingBillCode)"
            ></el-button>
          </template>

          <template>
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-document"
              @click="auditById(row.shoppingBillCode)"
            ></el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page.sync="queryCondition.pageNum"
      @current-change="queryByCondition"
      layout="total, prev, pager, next, jumper"
    ></el-pagination>
    <shopping-audit
      ref="audit"
      @post-submit="queryByCondition"
    ></shopping-audit>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *  "content": [
 {
      "shoppingBillCode": "SH86380509163945",
      "shoppingBillItems": [
        {
          "shoppingBillFk": "SH86380509163945",
          "itemIndex": 1,
          "goodsCode": "MT001",
          "goodsName": "游标卡尺",
          "goodsPrice": 12,
          "quantity": 2
        },
        {
          "shoppingBillFk": "SH86380509163945",
          "itemIndex": 2,
          "goodsCode": "MT002",
          "goodsName": "天平",
          "goodsPrice": 60,
          "quantity": 2
        }
      ],
      "amount": 0,
      "updateTime": "2022-05-09T08:39:45.056",
      "abandon": false,
      "supplyCompany": "蓝天供销社",
      "submitter": "anonymousUser",
      "submitTime": null,
      "shoppingState": "toSubmit",
      "auditor": "anonymousUser",
      "auditScore": -1,
      "resubmitTimes": 0
    },
 *
 */

// import New from './components/New.vue';
import mixinShoppingState from "@/components/mixinShoppingState";
import ShoppingAudit from "@/components/ShoppingAudit";
import { basic } from "@/api";
export default {
  name: "ShoppingAuditor",
  components: {
    ShoppingAudit,
    // New,Old,
  },
  mixins: [mixinShoppingState],
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      queryCondition: {
        shoppingState: null,
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      results: [],
      selected: [],
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
    // stateContent() {
    //   return function (row) {
    //     if (this.$store.state.shoppingStateEnums.length === 0) {
    //       return "N/A";
    //     }
    //     let p = this.$store.state.shoppingStateEnums.find(
    //       (x) => x.value === row.shoppingState
    //     );
    //     return p.label;
    //   };
    // },
    // stateColor() {
    //   return function (row) {
    //     if (this.$store.state.shoppingStateEnums.length === 0) {
    //       return "N/A";
    //     }
    //     let p = this.$store.state.shoppingStateEnums.find(
    //       (x) => x.value === row.shoppingState
    //     );
    //     return p.color;
    //   };
    // },
  },
  created() {},
  mounted() {
    this.queryByCondition(1);
  },
  methods: {
    sampleM() {},
    queryByCondition(pageNum) {
      if (pageNum) this.queryCondition.pageNum = pageNum;
      //todo: arrange into apis
      /* this.$http({
        method: "post",
        url: "http://localhost:9090/swimming/shopping/query4auditor",
        data: this.queryCondition,
      })*/
      basic.query4auditor(this.queryCondition).then(
        (res) => {
          this.total = res.data.total;
          this.results = res.data.results;
        },
        (error) => {
          this.$message.warning("query error: " + error.response.status);
        }
      );
    },
    resubmitById(id) {
      this.$message.warning("Debug id :" + JSON.stringify(id));
      /* this.$http({
        method: "put",
        url: `http://localhost:9090/swimming/shopping/resubmit/${id}`,
      })*/
      basic.resubmit(id).then(
        (res) => {
          this.$message.warning(JSON.stringify(res.data));
          this.queryByCondition(1);
        },
        (error) => {
          console.log(" request error : " + error.response.status);
        }
      );
    },
    auditById(id) {
      this.$message.warning("Debug id :" + JSON.stringify(id));
      this.$refs.audit.appear(id);
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.el-table {
  .el-descriptions {
    ::v-deep .el-descr-content {
      width: 130px;
    }
    ::v-deep .el-descr-label {
      width: 120px;
    }
  }
}
</style>
